<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Calaca | Search UI for Elasticsearch</title>
    <link rel='stylesheet' type='text/css' href='css/reset.css'>
    <link rel='stylesheet' type='text/css' href='css/calaca.css'>
    <!--[if IE]>
        <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
</head>
<body ng-app='calaca' ng-controller='calacaCtrl'>

<!-- Title and search box -->
<header class='jumbotron'>
  <h1 class='title'>Calaca</h1>
  <div class='search-box-container'>
    <input type='text' class='search-box' placeholder='Search' autofocus ng-model='query' ng-change='delayedSearch(0)'>
  </div>
</header>

<!-- Listing of search results -->
<main class='results-container'>
  <section class='results-info'>
    <p id='response-details'>{{(hits | number) || 0}} {{resultsLabel || 'results'}} ({{(timeTook || 0)}}ms)</p>
    <p ng-show='paginationEnabled()' id='pagination-details'>Showing {{paginationLowerBound}} - {{paginationUpperBound}}</p>
  </section>
  <section class='results'>
    <p class='no-results' ng-show='!results.length && !loading'>No Results</p>
    <article class='result' ng-repeat='result in results track by $id(result)'>
      <h2>{{result.target.repository}}</h2>
      <p>{{result.action}}</p>
      <p>{{result.timestamp}}</p>
      <h3 style="font-weight: bold; margin-top: 1em;">Raw Event:</h3>
      <pre>{{result | json}}</pre>
    </article>
  </section>
  <section class='pagination-controls'>
    <button ng-click='search(-1)' ng-show='paginationEnabled() && offset !== 0' class='pager'>Previous</button><button ng-click='search(1)' ng-show='paginationEnabled()' class='pager'>Next</button>
  </section>
</main>

<!-- Load resources -->
<script src='bower_components/angular/angular.min.js' type='text/javascript'></script>
<script src='bower_components/angular-animate/angular-animate.min.js' type='text/javascript'></script>
<script src='bower_components/elasticsearch/elasticsearch.angular.min.js' type='text/javascript'></script>
<script src='js/config.js' type='text/javascript'></script>
<script src='js/app.js' type='text/javascript'></script>
<script src='js/controllers.js' type='text/javascript'></script>
<script src='js/services.js' type='text/javascript'></script>
</body>
</html>
